<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <video src="video/scenery.mp4" controls></video>
        <div class="function">
            <button>播放</button>
            <button>快进5秒</button>
            <button>后退5秒</button>
            <button>音量+</button>
            <button>音量-</button>
            <button>静音</button>
        </div>
    </div>

    <script>
        let video = document.querySelector('video')
        let total = document.querySelectorAll('button')

        total[0].addEventListener("click",function(){
            if(video.paused){
                video.play()
                total[0].textContent = "暂停"
            }else{
                video.pause()
                total[0].textContent = '播放'
            }
        })
        total[1].addEventListener('click',function(){
            video.currentTime += 5
        })
        total[2].addEventListener('click',function(){
            video.currentTime -= 5
        })
        total[3].addEventListener('click',function(){
            video.volume = Math.min(video.volume +0.1,1)
        })
        total[4].addEventListener('click',function(){
            video.volume = Math.max(video.volume -0.1,0)
        })
        total[5].addEventListener('click',function(){
            video.muted = !video.muted
            total[5].textContent = video.muted ? '取消静音' : '静音'
        })

    </script>
</body>
</html>
